<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="陈嘉乐">
    <title></title>
    <style>
        * {
            box-sizing: border-box;
        }

        .container {
            width: 1000px;
            
            margin: 0 auto;
        }
       
        ul li{
            border: 1px solid black;
            width: 150px;
            height: 100px;
            display: inline-block;
            margin: 10px;
        }
        ul h1{
            margin-left: 300px;
          
        }
        ul li h2{
            font-size: 10px;
           text-align: center;
        }
        ul li p{
         text-align: center;
        }
        ul img{
            width: 170px;
            height: 120px;
            display: inline-block;
              display: none;  
             position: absolute;
              border: 1px  solid black; 
             margin-top: -10px;
              margin-left: -10px;
              
             
        }
      
    </style>
</head>

<body>
    <div class="container">
        <ul >
            <h1>名车车标展示</h1>
            <li>
                <img src="1.jpg" alt="">
                <h2>BMW</h2>
                <P>宝马汽车</P>
            </li>
            <li>
                 <img src="2.jpg" alt="">
                <h2>BMW</h2>
                <P>宝马汽车</P>
            </li>
            <li>
                 <img src="3.jpg" alt="">
                <h2>BMW</h2>
                <P>宝马汽车</P>
            </li>
            <li>
                 <img src="4.jpg" alt="">
                <h2>BMW</h2>
                <P>宝马汽车</P>
            </li>
            <li>
                 <img src="5.jpg" alt="">
                <h2>BMW</h2>
                <P>宝马汽车</P>
            </li>
            <li>
                 <img src="6.jpg" alt="">
                <h2>BMW</h2>
                <P>宝马汽车</P>
            </li>
            <li>
                 <img src="7.jpg" alt="">
                <h2>BMW</h2>
                <P>宝马汽车</P>
            </li>
            <li>
                 <img src="8.jpg" alt="">
                <h2>BMW</h2>
                <P>宝马汽车</P>
            </li>
            <li>
                 <img src="1.jpg" alt="">
                <h2>BMW</h2>
                <P>宝马汽车</P>
            </li>
            <li>
                 <img src="1.jpg" alt="">
                <h2>BMW</h2>
                <P>宝马汽车</P>
            </li>
        </ul>
    </div>
</body>

</html>
<script>
var lis = document.querySelectorAll('.container li');
 var imgs = document.querySelectorAll(" li img");
 

//  lis.onmouseover = function () {
//      imgs[i].index = i;
//      lis[i].index = i;
//      for (var i = 0; i < imgs.length; i++) {
//        imgs[this.index].style.display   = block;
//      }

//  }

 var lis=document.querySelectorAll('li');
    var imgs=document.querySelectorAll('img');
    for(var i=0;i<lis.length;i++){
        lis[i].index=i;
        imgs[i].index=i;
        lis[i].onmouseover=function(){
            imgs[this.index].style.display='block';
        }
        lis[i].onmouseout=function(){
             imgs[this.index].style.display='none';
        }
    }







</script>